大家知道 The Pudding （pudding.cool）吗？

这是一家以产出有创意和趣味的数据可视化故事出名的网站，他们的作品常使用可视化和交互的方式，来对文化议题进行讨论。不仅视觉上很精致，分析对象也很广泛。

比如女性衣服的口袋是不是真的比男性要小很多？

⌂ Women’s Pockets are Inferior

再比如这个视觉上令人印象深刻的 3D 人口地图：

⌂ Human Terrain

The Pudding 的创作者们常常一人扮演多个角色：既是文字作者，又是程序员，还是设计师。乐于分享的他们还会在“ How To ”栏目发表文章来分享自己创作经验。有些文章是已是好几年前写的了，但依旧跟得上这个领域的发展。

今天给大家带来的就是 The Pudding 的 Ilia Blinderman 写的数据可视化故事教程三部曲，包括了如何分析数据、如何数据可视化和如何写故事整套流程。课代表得到作者授权分享，编译成中文分享大家（原文见文末）。

因为篇幅原因，此分享被分成了上下两部，本篇是上部讲数据和设计，内容更多的如何写故事被放在了下部，下周和大家见面。文中提到的超链接做了汇总，可后台回复“22”，一键获取。

✦✧✧✧

前言

时常有读者问我们：如果想做出 The Pudding 这样的基于数据驱动的可视化故事，该怎么去学？

的确，市面上有关如何成为可视化记者的明晰指南还很少：不像传统的新闻写作、报道或编辑工作，这种形式的叙事方式方兴未艾，没有明确的定义，更没有一套正式的创作工具。因此，它的学习资源非常零散，要么是单单讲数据分析的，要么仅仅是围绕数据可视化，大家很难找到一份系统全面的指南。

而这背后还有一个更深层的问题：大家总有个奇怪的认知，什么呢？就是老觉得那些既会编程又会设计还会写故事的人，是天才，生来就智力超群。（如果对这个问题感兴趣，可以看看这两个视频：🔗www.youtube.com/watch?v=hIJdFxYlEKE ; 🔗www.youtube.com/watch?v=0IQlpFWTFbM）大家对能用编程实现可交互可视化的人，更会这么觉得。毕竟需要一套相对来说相互独立的技能：批判思维、设计、写作和编程。

在接下来的文章中，我希望可以带大家带来一份数据可视化故事操作工具指南，清楚且没有技术门槛。读完后，大家不仅会对我们 The Pudding 的工作流程更了解，还会更清楚在创作和我们类似的数据可视化故事时，用什么工具下手。当然，我也想通过这一系列文章，来破除一些初学者关于数据可视化的迷思。

✧✦✧✧

The Pudding 的工作流程

The Pudding 的成员们有着相当不同的背景：有来自商界的，有搞计算机，有心理学专业的，还有海洋学专业的，当然，还有新闻专业的。所以我们自己对数据技能的学习方法也多种多样。广义来说，我们都是通才，除了各自都有一技之长以外，我们还掌握了一些较通用的编程语言（有些人还精通数据分析、Javascript前端和数据可视化），这让我们可以操作各种选题。

我们使用的这些工具有一个共同的特点：免费！针对不同类型的数据分析和数据可视化工作，市面上其实有很多工具，但我们团队只使用任何人都可以直接用的开源工具。这些工具都是当下的行业标杆，而且我也希望大家可以明白，数据分析和数据可视化的最大障碍并不在工具买的得不够好，而是投入的时间和坚持。

大体上，我们的工作可以分成三大块：

1.数据  2.可视化  3.写作

本系列的第一篇，我先和大家谈谈数据。

✧✧✦✧

习惯编程

新手接触编程，往往会问最好的编程语言是什么？其实，这很大程度上取决于你打算（喜欢）做的事情。

我本人很喜欢使用 Python 进行数据分析，因为 Python 的语法对初学者相对友好，网上有相当多的代码和包可供你参考和学习。由 Python 入门还有另外一个优势：你在 Python 学到的基础知识，在分析数据和写数据可视化代码时，会发现十分有用。

但也要说一下，The Pudding 的成员们其实都有自己的偏好，这里也有必要展开提一下：Russell 更喜欢用 Javascript/Node 来处理数据；Amber 选择 R 语言，一个为统计和数据分析而生的语言；Matt 则是站队 MySQL 来做大数据运算。

⌂ RStudio 被用来编写和运营 R 语言

我从他们那儿学到的就是：Javascript 是个非常棒的工具，你越熟悉它的概念和怪异之处，在用网页制作交互的数据可视化时，就会越得心应手。R 语言在数据分析和创作静态可视化时，能大放异彩（RStuido有个非常棒的用户界面）。尽管我个人觉得在一些非标准数据工作时（爬虫，字符处理等），R 不如 Python 灵活和全能，而且在处理大数据的时候会有卡顿。MySQL 则有一个相对平和的学习曲线，虽然不是通常意义上的编程语言，但在学完后，你会觉得 MySQL 分析数据真的很快。但老实说，你甚至可以用 Excel 或者 Google Sheets ，来进行一些基础的数据分析。我个人会混用 R 、 Python 、 MySQL 和 Excel ，这完全取决于我需要处理的任务。

我这里推荐一些学习课程给大家（文中超链接做了汇总，可后台回复“22”，一键获取。）：

R

DataCamp’s Introduction to R

🔗www.datacamp.com/courses/free-introduction-to-r

ComputerWorld ’s Learn R For Beginners PDF (免费，需要注册)

🔗www.computerworld.com/article/2884322/learn-r-programming-basics-with-our-pdf.html#tk.ctw-infsb

Learning about MySQL and query basics at SQLZoo (建议先过一遍，了解MySQL的原理)

🔗sqlzoo.net

Setting up SequelPro and MAMP (很多团队成员都是通过这里学习MySQL)

🔗www.youtube.com/watch?v=iiUlL2V3dMI

JavaScript

A broad, in-depth introduction to JavaScript

🔗eloquentjavascript.net

A guide to analyzing data with JavaScript

🔗learnjsdata.com

Python

既然 Python 是我个人的最爱，这里我就给一份更多更详细的学习资源。

首先，为了搞清楚 Python 是如何运行的，我建议你先过一遍解释这门编程语言的资料。别担心，我明白光是让你接触编程就很吓人，而且还是让你一个人来，但网上真的有很多很多的教程。

在开始之前，可以先把 Jupyter notebook 的 Anaconda 环境配置好（🔗jupyter.readthedocs.io/en/latest/install.html）。可能你通常都是在 terminal 上面写代码、运行程序，但是 Notebook 提供了一个更直观友好的界面，可以简单快速地编辑和注释你的代码。

⌂ Jupyter notebook 的操作界面

配置好环境之后，就正式开始编程了。这三个资源 Lists（链接已失效）, Dictionaries and Web APIs（🔗github.com/ledeprogram/courses/blob/master/databases/02%20Dictionaries%20and%20Web%20APIs.ipynb）, Strings and Regular Expressions （链接已失效）是个很好的起点。我最开始就是通过它们掌握了像列表、循环、判断、返回、打印、对象、字符、整数和浮点数之类的编程概念。

熟悉了之后，我极力推荐你过一遍 My First Python Notebook（🔗www.firstpythonnotebook.org）。这是我在课堂外所接触到的对数据编程新手最好的教程（此处必须感谢洛杉矶时报的 Ben Welsh 整理）。Welsh 他在把编程术语的使用降到最低的同时，还能让你领会到你有能力运行的一系列分析任务。值得注意的是，这个系列最新一次更新是 2017 年 5 月（本文写于 2017 年 8 月）。我真的很感谢 Ben 为初学者们整理出如此出色的教程。

还要说一句，第一阶段的数据工作是很伤脑筋的，虽然电脑是个非常好的工具，但它也经常会不如你所愿，运行不了你想让它做的事。所以你真的不需要担心，你在学习编程中遇到的种种打击，每个学习编程的人也同样会遇到。这我太了解了，确实有些人看起来毫不费力地就能完成工作，但像我这样的，2014 年刚开始写代码那会，根本搞不懂 return 和 print 有什么区别。学习编程之所以恼人，是因为它不仅仅是记住命令行，更是一种思维方式。每一个小成功，每一次循环语句的正常运行，或者是搞定某个数据问题，都是在帮助你加深对于编程思维的理解。

其实写到这儿，最重要的技能其实是在遇到困难时，可以自然地说出“我真写不来，请问能不能帮帮我？”的那份淡定，以及提出正确的问题的技巧。StackOverflow（🔗stackoverflow.com）就是程序员们寻求帮助和意见的最佳平台，也是你寻找问题解决方案的最佳去处。上面可能有些吹毛求疵的用户，但是这个社区总体上都是在不遗余力地帮助彼此的。如果有人 diss 你的问题，这也很正常。我们起步的时候，这些都时常发生。请记住：开始的时候，谁都会吃瘪。最初几周的努力，就能给你换来这场比赛入场券。

接下来是这个系列的第二篇，这篇将集中帮助因为数据可视化的设计而感到焦虑的朋友们。

✧✧✧✦

设计和数据可视化

可视化的设计可能听起来很吓人：你想要将你分析出的哪些成果可视化？要用什么图表？代码又该怎么写呢？

这一系列的决定之复杂绝对会让任何一个人气馁。光是如何传达数据就很难了，而且还要用代码来实现，谁都少不了要抓狂。不过，我懂你，我当初年轻的时候也这样，相当不愉快。接下来，我会给你提供一些我的建议来减少可视化设计流程中的焦虑，坚持到最后，你也能创作出酷得不行的作品。

多看可视化

在学习创作之前，你首先要看看其他人都做了什么。海明威也读莎士比亚和陀思妥耶夫斯基，毕加索解构了不少委拉斯开兹和戈雅的画作。虽然我们和海明威、毕加索完全不是一个级别，更不是一个行业，但是从你看到和喜欢的数据可视化作品中吸取灵感，明白什么可以可视化、如何去可视化，是完全可行的。

我们在看到网上的优秀可视化作品时，会见猎心喜。The Pudding 也会经常从其他网站搜集灵感：The New York Times’ interactives、The Washington Post、Google News Lab、The Guardian's interactives、The r/dataisbeautiful subreddit。

我个人还强力推荐凯度的信息之美，这个网站类似一个可视化的百科全书，搜集了过去几年设计得不错的可视化作品。另一个资源就是 Andy Kirk 的个人网站 Visualizing Data，他每个月都会精挑细选一些可视化作品。

搜集你喜欢的作品

我不时会看到我欣赏的数据可视化作品，为了保证我可以记住从这些可视化作品中学到什么，我把它们都存在了 Google doc 里面。就是截图保存，然后加上注释，当然还要留下链接。

你也可以用 Sightline（🔗medium.com/@jordansekky/why-sightline-b877670aad5b）。这个由 Jordan Sechler 和 Evan Peck 制作的 Chrome 插件工具，可以让你自动保存数据可视化作品。除了自动整理你的收藏，你也可以通过它看看其他用户保存的作品，这可以让你更快地扩大收藏夹。

思考你的信息

在你进行数据可视化之前，思考一下你最想传递的最重要的信息是什么？这个关键信息是某个变量随时间增长的？两个变量之间的差距？还是某个值的变化程度？甚至是地理空间上的规则？

一旦你搞清楚了你希望传递给读者的关键信息，你就可以想想哪一种可视化可以最有效。而到这一步时，我通常会去看看自己的数据可视化收藏，找找灵感。

其他的参考资源可以看看 Data Viz Catalogue （🔗datavizcatalogue.com）或者 Data Viz Project（🔗datavizproject.com）。它们有一大串的图例，甚至还有这种图表类型最适合哪类数据的讲解。

不要用代码直接设计

一旦你知道了使用什么类型的图表，就可以开始设计了。有些人会就在餐巾纸后面涂鸦几笔，有些人就直接上手代码设计（说的就是你，Russell）。但对大部分人而言，直接用 Javascript 可能不是最可行的方案，这太容易陷入语法和报错中，然后疯狂在 StackOverflow 上面寻找解决方案，而把真正的设计可视化丢在一边。

我个人建议大家多花点时间用些简易的工具先去设计静态的可视化作品，这样你可以快速地明白你的可视化到底有没有传递你的思考。完全没有必要直接写代码或者用些花里胡哨的软件。 

这些年里，The Pudding 的 Matt 就是先在 Keynote 里面设计可视化作品的草图，然后和我交流后再实现。用一些 Keynote 里面的功能去制作数据可视化实在是出奇得简单。相比于直接上手 Adobe Illustrator，这样的学习曲线真的相对平和太多。我们其实最近也开始用 Figma（🔗www.figma.com），一个基于网页的设计工具，优点之一是可以同多个团队成员合作，并且可以导出 CSS 样式。

好了，你可能到这里已经完成了设计，并且迫不及待地要做交互了。那我们就来讲讲代码。

学习代码设计的第一步：读 Scott Murray 的书

写给新手的用代码做可视化作品的书实在太少了。但是 Scott Murray 的 Interactive Data Visualization for the Web （🔗alignedleft.com/work/d3-book-2e）是可以充分解释相当大一部分可视化编程概念的精品。这本书我每一页都会精心阅读。这是相当有用的一本书，它教会了我基础的 HTML/CSS，当然还有 d3.js 的原理。

更好的一点是，Scott Murray 会有意识地限制他给读者揭露的概念，给读者一个循序渐进式的体验，而是上来就用一大堆术语把人给逼疯。我个人强烈推荐这一本书。

学习代码设计的第二步：看别人的代码

Ian Johnson，网名 enjalot ，他做的 Bl.ock Builder（🔗blockbuilder.org/search） 可供大家浏览数据可视化作品。

比如你要做 Pie Chart ，可以直接在他网站搜 ”pie”，然后就会有一大把的代码例子。比如你不懂 d3.forceSimulation ?直接搜“ d3.force ”，就可以读到很多有用的代码。大部分时间，你应该都可以通过这个网站来理解一些比较难懂的概念。

学习代码设计的第三步：多提问！

有些时候，学习上述技能会是一个孤独的旅程，可能看起来真的没有人会帮你。但实际上，我们的数据可视化群体是非常友好且乐于助人的。如果你卡住了或者单纯想和同行们聊聊数据可视化，可以看看 D3 Slack Group（🔗d3-slackin.herokuapp.com）。更加具体的技术问题可以在 StackOverflow 上面提出来。

我希望以上讲解可以帮助到你目前遇到的关于设计或者编程的问题。把我刚刚说的完全融会贯通，并且产出一些作品确实是比较困难的，这就是为什么本文会以一些数据可视化专家们的作品结尾。

把想法和成品放一起看看

我希望前面的内容对你可能遇到的任何特定设计和代码问题有所帮助。但如果你还不会将这些步骤连接起来做出成品，那还是很难。因此，我想通过一些例子来说明即使对于专业人士而言，设计也很难，耗时且反反复复。

《科学美国人》杂志的在推特上发了这张动图，记录了她的团队在设计中画的草图：

⌂ 作者：AXS Studio; Jen Christiansen

关注最初的想法怎么变成最终的呈现效果，是很迷人的一件事。我非常喜欢在《科学美国人》杂志工作了十多年的 Jen Christiansen ，她非常注重通过一系列步骤来完善其团队的设计。

我们的团队也是这样的。来看看 Matt 为我们与 Google 新闻实验室合作的作品《美国媒体的多样性》所做的漫长设计过程。

最开始，只有一个白板：

然后，他为这个故事的各个部分做了许多不同的设计：

⌂向右滑动，查看更多图片

你可以在这里看最终效果（🔗googletrends.github.io/asne/）。

最终，我想带给你 Mike Bostock（ D3.js 的创始人，纽约时报资深数据可视化记者）的演讲。

在这里，他讨论了数据可视化的设计。有些人可能真的是因为天赋异禀所以做出了好设计，但我们多数人的水平都相差不大：作品的质量是和投入时间正相关的，而不是靠天分。在视频里可以看到 Mike 他本人的作品也是经过多次迭代后才做出来的，这相当鼓舞我：哪怕 Mike 这么牛的人，也是经过千百次尝试才知道什么方案合适，那我们还有什么理由不去埋头苦干呢？

◒◡◒

┊推 - 荐 - 阅 - 读┊